<template>
  <view class="question-bank-page">
    <!-- 顶部栏 -->
    <view class="qb-header">
      <uv-icon
        name="arrow-left"
        size="28"
        color="#fff"
        class="qb-back"
        @click="goBack"
      />
      <text class="qb-title">面试宝典</text>
      <!-- <view class="qb-mistake-btn" @click="goToWrongQuestions">
        <uv-icon name="info-circle" size="22" color="#fff" style="margin-right: 6rpx;" />
        答题历史
      </view> -->
      <uv-icon name="list" color="#fff" size="28" @click="openPopup"></uv-icon>
    </view>
    <!-- 筛选区 -->
    <view class="qb-filter-card">
      <view class="qb-filter-card-search">
        <uv-input
          placeholder="请输入关键字搜索"
          border="surround"
          v-model="value"
          @change="change"
        ></uv-input>
        <uv-button text="搜索" type="primary" @click="search"></uv-button>
      </view>
      <view class="qa-filters">
        <uni-data-select
          class="filter-pill"
          v-model="difficulty"
          :localdata="difficultyOptions"
          placeholder="难度"
          @change="selectPosition"
        ></uni-data-select>
        <uni-data-select
          class="filter-pill"
          v-model="frequency"
          placeholder="高频"
          :localdata="frequencyOptions"
          @change="selectPosition"
        ></uni-data-select>
        <uni-data-select
          class="filter-pill"
          placeholder="易错"
          v-model="mistake"
          :localdata="mistakeOptions"
          @change="selectPosition"
        ></uni-data-select>
      </view>
      <button class="qb-reset-btn" @click="resetFilters">重置筛选</button>
      <button
        class="qb-start-btn"
        @click="goToPractice"
        loadingText="(根据筛选条件生成题目)"
      >
        开始答题
      </button>
    </view>
    <!-- 问题卡片列表 -->
    <view class="qb-question-list">
      <view
        class="qb-question-card"
        v-for="item in questionList"
        :key="item.id"
      >
        <view class="qb-q-row">
          <uv-icon name="question-circle" color="#4ECDC4" size="24" />
          <text class="qb-q-text">{{ item.question }}</text>
        </view>
        <view class="qb-q-tags">
          <view class="qb-q-tags-left">
            <view class="qb-q-tag">{{ item.category }}</view>
            <view class="qb-q-tag">{{ item.level }}</view>
          </view>
          <view class="qb-q-tags-right">
            <view
              class="qb-q-link"
              v-if="expandedId !== item.id"
              @click="expandedId = item.id"
              >查看答案 <uv-icon name="arrow-down" color="#4ECDC4" size="16"
            /></view>
            <view class="qb-q-link" v-else @click="expandedId = null"
              >收起 <uv-icon name="arrow-up" color="#4ECDC4" size="16"
            /></view>
          </view>
        </view>

        <view v-if="expandedId === item.id" class="qb-answer-area">
          <view class="qb-answer-title">参考回答：</view>
          <view class="qb-answer-content">
            <template v-if="item.id === 1">
              关键指标：FCP、LCP、TTI、CLS等。优化方法包括：
              <ul>
                <li>资源优化：压缩合并、懒加载、预加载、缓存策略</li>
                <li>渲染优化：减少重排重绘、CSS优化、关键路径渲染</li>
                <li>代码优化：代码分割、Tree Shaking、优化JavaScript执行</li>
                <li>网络优化：CDN加速、HTTP/2、减少网络请求</li>
              </ul>
            </template>
            <template v-else> 示例答案内容...</template>
          </view>
          <view class="qb-answer-collapse" @click="expandedId = null"
            >收起</view
          >
        </view>
      </view>
    </view>
    <uv-tabbar
      :value="tabValue"
      @change="tabChange"
      activeColor="#4ECDC4"
      style="width: 100%"
    >
      <uv-tabbar-item text="模拟面试" icon="play-circle"></uv-tabbar-item>
      <uv-tabbar-item text="演练面试" icon="reload"></uv-tabbar-item>
      <uv-tabbar-item text="面试宝典" icon="account"></uv-tabbar-item>
    </uv-tabbar>
        <uv-popup ref="popup" mode="right" @change="change">
      <view class="popup-menu">
        <view class="popup-header">
         
          <uv-icon name="close" color="#999" size="24" @click="closePopup"></uv-icon>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="goToHistory">
            <uv-icon name="clock" color="#4ECDC4" size="20"></uv-icon>
            <text class="menu-text">答题历史</text>
            <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
          </view>
          <view class="menu-item" @click="goToWrongQuestions">
            <uv-icon name="info-circle" color="#fa3534" size="20"></uv-icon>
            <text class="menu-text">我的错题</text>
            <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
          </view>
        
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      difficulty: '',
      frequency: '',
      mistake: '',
      difficultyOptions: [
        { text: '初级', value: 'junior' },
        { text: '中级', value: 'middle' },
        { text: '高级', value: 'senior' }
      ],
      frequencyOptions: [
        { text: '非常高', value: 'very_high' },
        { text: '较高', value: 'high' },
        { text: '一般', value: 'normal' }
      ],
      mistakeOptions: [
        { text: '极易出错', value: 'very_mistake' },
        { text: '常见出错', value: 'common_mistake' }
      ],
      tabIndex: 0,
      difficulty: [],
      frequency: [],
      mistake: [],
      difficultyOptions: [
        { text: '初级', value: 'junior' },
        { text: '中级', value: 'middle' },
        { text: '高级', value: 'senior' }
      ],
      frequencyOptions: [
        { text: '非常高', value: 'very_high' },
        { text: '较高', value: 'high' },
        { text: '一般', value: 'normal' }
      ],
      mistakeOptions: [
        { text: '极易出错', value: 'very_mistake' },
        { text: '常见出错', value: 'common_mistake' }
      ],
      questionList: [
        {
          id: 1,
          question: '前端性能优化的关键指标有哪些？如何进行优化？',
          category: '前端开发',
          level: '中级',
          views: 1243
        },
        {
          id: 2,
          question: '请描述一个你主导的产品从需求到上线的完整过程',
          category: '产品经理',
          level: '高级',
          views: 956
        }
      ],
      expandedId: null,
      tabValue: 2
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    resetFilters() {
      this.difficulty = []
      this.frequency = []
      this.mistake = []
      this.industryIndex = 0
      this.positionIndex = 0
      this.tabIndex = 0
    },
    goToPractice() {
      uni.navigateTo({ url: '/pages/questionPractice' })
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/interview' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pages/practiceHistory' })
      } else if (index === 2) {
        uni.navigateTo({ url: '/pages/questionBank' })
      }
    },
    goToWrongQuestions() {
      uni.navigateTo({ url: '/pages/wrongQuestions' })
    },
    openPopup() {
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    },
    goToHistory() {
      this.$refs.popup.close()
      uni.navigateTo({ url: '/pages/answeringHistory' })
    },
 
  }
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';
.question-bank-page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 32rpx;
}
.qb-header {
  background: $uni-default-color;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 90rpx;
  position: sticky;
  top: 0;
  z-index: 10;
}
.qb-back {
  margin-right: 12rpx;
}
.qb-title {
  font-size: 32rpx;
  font-weight: bold;
}
.qb-mistake-btn {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 32rpx;
  padding: 8rpx 22rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}
.qb-filter-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 24rpx 0 18rpx 0;
  width: 92%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.qb-filter-card-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  margin-bottom: 18rpx;
}
.qb-filter-row {
  display: flex;
  gap: 18rpx;
  margin-bottom: 18rpx;
}
.qb-picker {
  flex: 1;
  background: #f8fafd;
  border-radius: 12rpx;
  border: 1px solid #e0e0e0;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qb-picker-inner {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

.qb-tab {
  background: #e6f7f6;
  color: #3ad6b6;
  border-radius: 32rpx;
  font-size: 24rpx;
  padding: 8rpx 22rpx;
  cursor: pointer;
  transition: all 0.2s;
}
.qb-tab.active {
  background: #3ad6b6;
  color: #fff;
}

.qb-checkbox-label {
  width: 80rpx;
  color: #888;
  font-size: 24rpx;
  margin-right: 12rpx;
}
.qb-checkbox {
  margin-right: 24rpx;
  font-size: 24rpx;
  color: #333;
  display: inline-flex;
  align-items: center;
}
.qb-reset-btn {
  width: 100%;
  background: #f2f2f2;
  color: #888;
  border: none;
  border-radius: 12rpx;
  font-size: 26rpx;
  margin: 18rpx 0 12rpx 0;
  height: 64rpx;
}
.qb-start-btn {
  width: 100%;
  background: #3ad6b6;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  height: 72rpx;
  margin-bottom: 8rpx;
}
.qb-question-list {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.qb-question-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 24rpx 18rpx 18rpx 18rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  border-left: 8rpx solid #4ecdc4;
}
.qb-q-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}
.qb-q-text {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}
.qb-q-tags {
  display: flex;
  gap: 12rpx;
  margin-bottom: 6rpx;
  justify-content: space-between;
  .qb-q-tags-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }
}
.qb-q-tag {
  background: #eafaf3;
  color: #3ad6b6;
  border-radius: 12rpx;
  font-size: 20rpx;
  padding: 4rpx 14rpx;
}
.qb-q-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}

.qb-q-link {
  color: #3ad6b6;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.qb-answer-area {
  background: #f6fcfa;
  border-radius: 10rpx;
  border: 1px solid #d2f2ea;
  margin: 12rpx 0 0 0;
  padding: 18rpx 18rpx 10rpx 18rpx;
  color: #222;
  font-size: 24rpx;
}
.qb-answer-title {
  font-weight: bold;
  color: #3ad6b6;
  margin-bottom: 8rpx;
}
.qb-answer-content ul {
  margin: 8rpx 0 0 0;
  padding-left: 22rpx;
}
.qb-answer-content li {
  margin-bottom: 6rpx;
  line-height: 1.7;
}
.qb-answer-collapse {
  color: #3ad6b6;
  font-size: 24rpx;
  margin-top: 10rpx;
  cursor: pointer;
  text-align: right;
}
.qa-filters {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
  .filter-pill {
    ::v-deep .uni-select {
      background: #e6f7f6 !important;
      border: none !important;
      font-size: 20rpx !important;
      border-radius: 8rpx;
      border: 1px solid #4ecdc4 !important;
      padding: 2rpx 10rpx !important;
      font-size: 20rpx !important;
    }
  }
}

/* 弹窗菜单样式 */
.popup-menu {
  width: 600rpx;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 32rpx 24rpx 24rpx 24rpx;
  border-bottom: 1px solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.menu-list {
  flex: 1;
  padding: 24rpx 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1px solid #f8f8f8;
  transition: background-color 0.2s;
}

.menu-item:active {
  background-color: #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
}

</style>
